<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #c0c0c0;
        }

        form {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 1px solid #ccffcc;
            background-color: #ccffcc;
        }

        h2 {
            text-align: center;
            height: 30px;
            margin: 10px 0;
            color:  #ff6700
        }

        label {
            display: inline-block;
            margin-left: 50px;
            line-height: 40px;
        }

        label>span {
            margin-left: 0px;
        }

        input {
            line-height: 20px;
            margin-right: 3px;
        }

        span {
            margin-left: 50px;
        }

        select {
            margin: 10px 0;
            border-radius: 10px;
            text-align: center;
        }

        textarea {
            margin-bottom: 10px;
            vertical-align: top;
            background-color: #ccc;
            border-radius: 5px;
            resize: none;
            outline: none;
        }

        span>button {
            display: inline-block;
            width: 60px;
            line-height: 30px;
            margin-left: 60px;
            border-radius: 15px; 
        }
    </style>
</head>

<body>
    <form action="5.表格的基本使用.html" method="GET" name="name1">
        <h2>用户登录页面</h2>
        <label for="username"><span>用户名:</span></label>
        <input type="text" name="username" id="username" placeholder="请输入用户名"> <br>
        <label for="password"><span>密&nbsp;&nbsp;&nbsp;码:</span></label>
        <input type="text" name="password" id="password" placeholder="请输入密码" maxlength="11"> <br>
        <span>性&nbsp;&nbsp;&nbsp;别:</span>
        <input type="radio" name="gender" id="sex" checked><label for="sex" style="margin-left: 0;">男</label>
        <input type="radio" name="gender" id="sex1"> <label for="sex1" style="margin-left: 0;">女</label> <br>
        <span>爱&nbsp;&nbsp;&nbsp;好:</span>
        <input type="checkbox" name="" id="pw"><label for="pw" style="margin-left: 0">跑步</label>
        <input type="checkbox" name="" id="sf"><label for="sf" style="margin-left: 0">书法</label>
        <input type="checkbox" name="" id="sw"><label for="sw" style="margin-left: 0">上网</label>
        <input type="checkbox" name="" id="qt"><label for="qt" style="margin-left: 0">其他</label>
        <span>地&nbsp;&nbsp;&nbsp;区:</span>
        <select name="" id="">
            <option value="" selected>请选择</option>
            <option value="">重庆</option>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">广州</option>
            <option value="">南京</option>
        </select> <br>
        <span>简&nbsp;&nbsp;&nbsp;介:</span>
        <textarea name="" id="" cols="30" rows="5" placeholder="请进行简要介绍"></textarea> <br>
        <span><button>提交</button></span>
        <span><button type="reset" style="margin-left: -35px;">重置</button></span>

    </form>
</body>

</html>